import React, { Component } from 'react'
import { Button } from 'antd-mobile'

class Login extends Component {
  state = {
    username: '',
    password: ''
  }

  setValue = e => {
    // e.target.attributes
    // console.log(e.target.getAttribute('aname'))
    console.log(e.target.dataset)
    this.setState({ [e.target.name]: e.target.value })
  }

  render() {
    let { username, password } = this.state
    return (
      <div>
        <div>
          <label>
            账号：
            {/* data- 开头的，dataset属性，它是html5提供的属性  */}
            <input type="text" data-name="username" name="username" value={username} onChange={this.setValue} />
          </label>
        </div>
        <div>
          <label>
            密码：
            <input type="text" data-name="password" name="password" value={password} onChange={this.setValue} />
          </label>
        </div>
        <div>
          <Button
            type="primary"
            onClick={() => {
              console.log(this.state)
            }}
          >
            用户登录
          </Button>
        </div>
      </div>
    )
  }
}

export default Login
